<template>
  <div class="page light">
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xquimini-content-page" style="height: calc(100% - 36px)">
          <div class="xquimini-container xquimini-page-anim">
            <div class="xquimini-main">
              <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px;clear: both">
                  <form action="" class="xqui-form xqui-form-pane">
                    <div class="xqui-form-item">
                      <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inline">
                        <button @click.prevent="findUserList" class="xqui-btn xqui-btn-primary"
                                lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                        </button>
                        <router-link to="/book/add">
                          <button class="xqui-btn xqui-btn-primary"
                                  lay-filter="data-search-btn" lay-submit="" type="submit">添 加
                          </button>
                        </router-link>
                      </div>
                      <div style="float: right;font-weight: bold ;font-size: 12px;position: relative;top:10px;">
                        一共有{{ total || 0 }}位同学加入了我们!
                      </div>
                    </div>
                  </form>
                </div>
              </fieldset>
              <fieldset class="table-search-fieldset">
                <legend>编辑信息</legend>
                <div style="margin: 10px 10px 10px 10px;clear: both">
                  <form action="" class="xqui-form xqui-form-pane">
                    <div class="xqui-form-item">
                      <div class="xqui-inlinex"><label class="xqui-form-label">标题</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inlinex"><label class="xqui-form-label">标题</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inlinex"><label class="xqui-form-label">标题</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inlinex"><label class="xqui-form-label">标题</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inlinex"><label class="xqui-form-label">标题</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                    </div>
                    <div class="xqui-inlinexbtun mt10">
                      <button @click.prevent="findUserList" class="xqui-btn xqui-btn-primary"
                              lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                      </button>
                      <router-link to="/book/add">
                        <button class="xqui-btn xqui-btn-primary"
                                lay-filter="data-search-btn" lay-submit="" type="submit">取 消
                        </button>
                      </router-link>
                    </div>
                  </form>
                </div>
              </fieldset>
              <div class="xqui-form xqui-border-box xqui-table-view" lay-filter="LAY-table-1" lay-id="currentTableId"
                   style=" ">
                <div class="xqui-table-box">
                  <div class="xqui-table-header">
                    <table border="0" cellpadding="0" cellspacing="0" class="xqui-table" lay-skin="line">
                      <thead>
                      <tr>
                        <th class=" xqui-table-col-special" data-field="0" data-key="1-0-0" data-unresize="true">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="selectAll"><input
                            lay-filter="layTableAllChoose"
                            lay-skin="primary"
                            name="layTableCheckbox"
                            type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox" lay-skin="primary"><i
                              class="xqui-icon" :class="[allchecked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>学号</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>头像</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>昵称</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>性别</span></div>
                        </th>

                        <th class=" xqui-table-col-special" data-field="10" data-key="1-0-10" data-minwidth="150">
                          <div align="center" class="xqui-table-cell"><span>操作</span></div>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr :key="user.id" class="" data-index="0" v-for="(user , index) in items">
                        <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">
                          <div class="xqui-table-cell laytable-cell-checkbox" @click="changeChecked(index)"><input
                            lay-skin="primary"
                            name="layTableCheckbox"
                            type="checkbox">
                            <div class="xqui-unselect xqui-form-checkbox" lay-skin="primary"><i
                              class="xqui-icon" :class="[user.checked?'xqui-icon-ok':'']"></i></div>
                          </div>
                        </td>
                        <td class="" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell">{{ user.code }}</div>
                        </td>
                        <td class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell">{{ user.name }}</div>
                        </td>
                        <td class="" data-field="sex" data-key="1-0-3">
                          <div class="xqui-table-cell">{{ user.nickname }}</div>
                        </td>
                        <td class="" data-field="city" data-key="1-0-4">
                          <div class="xqui-table-cell">{{ user.sex }}</div>
                        </td>

                        <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                            class="xqui-table-col-special">
                          <div class="xqui-table-cell">
                            <a @click.prevent="updatePassword(index)"
                               class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                              class="iconfont icon-fenfaneirong"></i>重置默认</a>
                            <a @click.prevent="editorUser(index)"
                               class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                              class="iconfont icon-bianji"></i>编辑</a>
                            <a @click.prevent="deleteUser(index)"
                               class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                              class="iconfont icon-remove2"></i>删除</a>
                          </div>
                        </td>
                      </tr>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="20">
                          <div class="text-center ksd-empty" v-if="total == 0 && showtype == 3">
                            <p><img src="~@/assets/img/nodata.png" style="display: inline;width: 200px" alt=""></p>
                            <p class="mt20"><span>暂无数据</span></p>
                          </div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <div class="xqui-table-page">
                  <pug-page
                    :page-index="currentPage"
                    :total="count"
                    :page-size="pageSize"
                    @change="pageChange">
                  </pug-page>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import PugPage from '@/components/page/PugPage'

export default {
  name: "Course.vue",
  components: {
    PugPage
  },
  data() {
    return {
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100, //总记录数
      allchecked: false,
      items: [
        {code: 1, name: " 编程到底该如何学习？", nickname: "xxxxx", sex: 1, checked: false},
        {code: 2, name: "学习编程之前你要了解的知识！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 3, name: "工欲善其事，必先利其器！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 4, name: "基础决定你未来的高度！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 5, name: "程序的本质就是这些！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 6, name: "利用集合高效解决问题！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 7, name: "从零开始开发游戏！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 8, name: "日常开发必备知识！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 9, name: "最简单的数据结构！", nickname: "xxxxx", sex: 1, checked: false},
        {code: 10, name: "Java进阶必会技能！", nickname: "xxxxx", sex: 1, checked: false},
      ]
    }
  },
  methods: {
    //获取数据
    getList() {

    },

    changeChecked(index) {
      this.items[index].checked = !this.items[index].checked;
      var len = this.items.length;
      var clen = this.items.filter(item=>item.checked).length;
      this.allchecked = len == clen;
    },

    selectAll() {
      this.allchecked = !this.allchecked;
      this.items.map(item => item.checked = !item.checked);
    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    }
  },
  mounted() {
    //请求第一页数据
    this.getList()
  }
}
</script>

<style scoped>


</style>
